<template>
    <div>
      <div class="swiper1">
         <mt-swipe :auto="4000" :defaultIndex="0" class="mt-swiper" prevent>
      <mt-swipe-item 
      class="slide10" 
      ><img :src="detaillist.img"/></mt-swipe-item>
      <mt-swipe-item class="slide20">2</mt-swipe-item>
        </mt-swipe>
    </div>
    <div class="good-name">
        <h1 class="name">MATERIAL GIRL Coca-Cola×MATERIAL GIRL 联名款   {{detaillist.titile}} </h1>
    </div>
    <div class="price"
    >￥{{detaillist.price}}</div>
    <div class="feedback-list ">
   <ul class="nav-tab">
     <li class="comment-nav">商品评价</li>
      <li class="comments-nav">常见问题</li>
   </ul>
   <div class="feedback-content">
     <div class="content-main">
       <p class="shop1">商品都是正品吗?</p>
       <p class="ans">有货www.yohobuy.com所售的商品均经品牌授权，正品保障，请您放心购买.</p>
       <p>尺码表上的尺码标准吗?</p>
       <p class="ans">有货所售商品尺寸均为人工实物测量，可能会存在1-2cm的正常误差范围.</p>
     </div>
   </div>
   </div>
    <div class="foot ">
       <ul>
       <li>  <router-link to='/Cart'><div class="cart">&#xe600;</div><p clas="text">购物车</P></router-link></li>
        <li><div class="shop">&#xe612;</div><p clas="text">品牌店铺</P></li>
       </ul>
       <div class="addcart"
       @click.stop="addcart(detaillist)"
       >加入购物车</div>
    </div>
    </div>
</template>

<script>
import {
  mapMutations
} from 'vuex'
export default {
  name: 'detail',
  data () {
   return {
     detaillist:{}  
   }
  },
  created () {
    // console.log(this)
    this.detaillist=this.$route.params 
  },
  methods: {
    ...mapMutations(['addcart'])
  }
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'iconfont';  /* project id 935498 */
  src: url('//at.alicdn.com/t/font_935498_0of8lws0dp6.eot');
  src: url('//at.alicdn.com/t/font_935498_0of8lws0dp6.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_935498_0of8lws0dp6.woff') format('woff'),
  url('//at.alicdn.com/t/font_935498_0of8lws0dp6.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_935498_0of8lws0dp6.svg#iconfont') format('svg');
}
a{
  text-decoration: none;
  color: #444;
}
.cart{
  height: 35px;
    display: block;
    font-family: 'iconfont';
    font-size: 1.5rem;
    line-height: 35px;
    text-align: center;
}
.shop{
 height: 35px;
    display: block;
    font-family: 'iconfont';
    font-size: 1.5rem;
    line-height: 35px;
    text-align: center;
}
.swiper1{
   margin: 0 auto;
}
 .mt-swiper {
        height: 350px;
        color: #fff;
        font-size: 30px;
        text-align: center;
        margin-bottom: 20px;
         line-height: 200px;
        width: 263px;
        margin: auto;
    margin-top: 20px;
      }
     
  
      .slide20 {
        background-color: #ffd705;
        color: #000;
      }
    
    .mint-swipe-indicator{
        margin: -87px 3px;
    }
    .good-name{
      background-color: #515150;
    box-sizing: border-box;
    color: #fff;
    padding: .5rem .7rem;
    width: 100%;
    height: 90px;
    }
     .name{
      font-size: 1.0rem;
    line-height: 35px;
     }
     .price{
           color: #d0021b;
    margin-right: .25rem;
        line-height: 3.2rem;
        font-size: .86475rem;
            background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    color: #b0b0b0;
    height: 3.2rem;
    padding-left: .75rem;
    padding-right: .75rem;
    position: relative;
    width: 100%;
     }
     .addcart{
           background-color: #eb0313;
    color: #fff;
    font-size: .8rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    width: 6.5rem;
    float: right;
    margin-top: 10px;
        margin-left: 70px;
     }
     ul{
       display: flex;
       float: left;
       li{
          margin-left: 32px;
          .text{
                color: #444;
    font-size: .375rem;
          }
       }
     }
     .foot{
           height: 60px;
    border-top: 1px solid #dededede;
    position: absolute;
    bottom: 0px;
    background: #f0f0f0;
    width: 100%
     }
     .feedback-list {
           background-color: #f0f0f0;
    margin-bottom: .5rem;
    margin-top: .5rem;
    height: 263px;
   
      ul{
        background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
    padding: .25rem 0;
    width: 100%;
    li{
      box-sizing: border-box;
    color: #b0b0b0;
    float: left;
    font-size: .7rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    width: 50%;
    }
      }
     }
     .content-main{
       background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    padding: .5rem .7rem;
    font-size: 12px;
    p{
      padding: 10px;
    }
     }
     .ans{
       font-size: 12px;
       color:#c8c8c8;
     }
     .shop1{
           margin-top: 30px;
           font-size: 12px;
     }
   img{
     display: block;
     width: 263px;
     height: 350px;
   }
</style>
